<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>
            Graphique en SVG
        </title>
    </head>
    <body>
        <svg style="width:500px; height: 400px;">
            <rect x="50" y="1" width="450" height="250" style="fill:white; stroke: black; stroke-width: 1;" />
            <g style="font-size:12px;">
                <text x="50" y="270" transform="rotate(-60, 50, 270)" style="fill:black; text-anchor: end;">01/2014</text>
                <rect x="50" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="70" y="270" transform="rotate(-60, 70, 270)" style="fill:black; text-anchor: end;">02/2014</text>
                <rect x="70" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="90" y="270" transform="rotate(-60, 90, 270)" style="fill:black; text-anchor: end;">03/2014</text>
                <rect x="90" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="110" y="270" transform="rotate(-60, 110, 270)" style="fill:black; text-anchor: end;">04/2014</text>
                <rect x="110" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="130" y="270" transform="rotate(-60, 130, 270)" style="fill:black; text-anchor: end;">05/2014</text>
                <rect x="130" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="150" y="270" transform="rotate(-60, 150, 270)" style="fill:black; text-anchor: end;">06/2014</text>
                <rect x="150" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="170" y="270" transform="rotate(-60, 170, 270)" style="fill:black; text-anchor: end;">07/2014</text>
                <rect x="170" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="190" y="270" transform="rotate(-60, 190, 270)" style="fill:black; text-anchor: end;">08/2014</text>
                <rect x="190" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="210" y="270" transform="rotate(-60, 210, 270)" style="fill:black; text-anchor: end;">09/2014</text>
                <rect x="210" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="230" y="270" transform="rotate(-60, 230, 270)" style="fill:black; text-anchor: end;">09/2014</text>
                <rect x="230" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="250" y="270" transform="rotate(-60, 250, 270)" style="fill:black; text-anchor: end;">10/2014</text>
                <rect x="250" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="270" y="270" transform="rotate(-60, 270, 270)" style="fill:black; text-anchor: end;">10/2014</text>
                <rect x="270" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="290" y="270" transform="rotate(-60, 290, 270)" style="fill:black; text-anchor: end;">11/2014</text>
                <rect x="290" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
                <text x="310" y="270" transform="rotate(-60, 310, 270)" style="fill:black; text-anchor: end;">12/2014</text>
                <rect x="310" y="250" width="1" height="5" style="stroke: black; stroke-width: 1;" />
            </g>
            <g style="font-size: 12px;">
                <text x="40" y="250" style="fill:black; text-anchor: end;">0</text>
                <rect x="45" y="250" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="230" style="fill:black; text-anchor: end;">100</text>
                <rect x="45" y="230" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="210" style="fill:black; text-anchor: end;">200</text>
                <rect x="45" y="210" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="190" style="fill:black; text-anchor: end;">300</text>
                <rect x="45" y="190" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="170" style="fill:black; text-anchor: end;">400</text>
                <rect x="45" y="170" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="150" style="fill:black; text-anchor: end;">500</text>
                <rect x="45" y="150" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="130" style="fill:black; text-anchor: end;">600</text>
                <rect x="45" y="130" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="110" style="fill:black; text-anchor: end;">700</text>
                <rect x="45" y="110" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="90" style="fill:black; text-anchor: end;">800</text>
                <rect x="45" y="90" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="70" style="fill:black; text-anchor: end;">900</text>
                <rect x="45" y="70" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="50" style="fill:black; text-anchor: end;">1 000</text>
                <rect x="45" y="50" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="30" style="fill:black; text-anchor: end;">1 100</text>
                <rect x="45" y="30" width="5" height="1" style="stroke: black; stroke-width: 1;" />
                <text x="40" y="10" style="fill:black; text-anchor: end;">1 200</text>
                <rect x="45" y="10" width="5" height="1" style="stroke: black; stroke-width: 1;" />
            </g>
            <g>
            <path d="M 50 0 L 100 50 L 200 200 L 250 190" class="path" />
            </g>
        </svg>
        <style type="text/css">
            .path{
                fill: red;
                stroke-width: 4px;
                stroke: green;
            }
        </style>
    </body>
</html>